<template>
  <div class="board-item">
    <span class="line" :style="{borderLeft: `4px solid ${topicItem.Color}`}"></span>
    <div class="title-recent">
      <div class="avatar" :style="{background:topicItem.Color}">
        <!-- <img src="http://szcert.ebs.org.cn/Images/govIcon.gif" alt=""> -->
        {{topicItem.KeyFileIds.substring(0,1) }}
      </div>
      <div class="right">
        <h2>
          <p class="title" :title="topicItem.FirstContent">{{topicItem.Title}}</p>
        </h2>
      </div>
    </div>
    <span
      class="mark"
      title="钉一下"
      @click.prevent="handleMark({title:topicItem.Title,topicId:topicItem.Id})"
    >
      <svg-icon icon-class="mark"></svg-icon>
    </span>
    <div class="left">
      <div class="topic-info lefttext">
        <span class="time">时间：{{topicItem.EndTopicTime |TimeChange }}</span>
      </div>
      <div class="lefttext">
        <span class="keyFiles">
          类型：
          <i class="block" :style="{background:topicItem.Color}"></i>
          {{topicItem.KeyFileIds}}
        </span>
      </div>
    </div>
    <span class="icons">
      <!-- icon专用 TODO -->
      <!-- <div @click.prevent="handleTest1">123123</div> -->
    </span>
    <div class="append-icons">
      <!-- icon专用 TODO -->
    </div>
    <DeleteIcon
      :topicId="topicItem.Id"
      @onFlashPage="flashTopic"
      v-if="topicItem.DeleteAble"
      class="delete-class"
    ></DeleteIcon>
  </div>
</template>
<script>
import DeleteIcon from "@/components/DeleteIcon";
import { formatTime, delHtmlTag } from "@/utils/index";
import { MarkTopic } from "@/api/topic";
export default {
  name: "TopicItem",
  props: {
    item: {
      type: Object,
      default: null
    },
    flashTopic: {
      type: Function,
      default: ""
    }
  },
  components: {
    DeleteIcon: DeleteIcon
  },
  data() {
    return {
      colorBox: {
        ULSG打推: "#FB966E",
        ET打推: "rgb(64, 158, 255)",
        Bag打推: "#FF9999",
        排料: "#99CC33",
        绘图仪和切割机: "#FF9900",
        网络睿排: "rgb(239, 191, 0)",
        版本发布: "#FF0033",
        ETPS: "#FF9966",
        ETBRA: "#FF8000",
        裁床: "#FF9966",
        功能操作说明: "#FF9966",
        没有: "#000",
        排料: "#99CC33",
        升级内容: "#00AEAE",
        数字化仪: "#0066CC",
        培训文档: "#8C8C00",
        ICM: "#8080C0",
        PPT: "#804040",
        微信: "#8F4586",
        ET: "#00EC00"
      },
      topicItem: {}
    };
  },
  created() {
    this.topicItem = this.handleFormat(this.$props.item);
    close;
  },
  methods: {
    //标记帖子
    handleMark(item) {
      MarkTopic(item).then(res => {
        if (res.Success) {
          this.$message({
            message: "标记成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.ErrMes,
            type: "warning"
          });
        }
      });
    },
    handleFormat(el) {
      // el.CreateTime = formatTime(el.CreateTime, false);
      if (el.KeyFileIds.indexOf(",") != -1) {
        el.KeyFileIds = el.KeyFileIds.substring(0, el.KeyFileIds.length - 1);
        let colorBox = el.KeyFileIds.split(",");
        el.Color =
          this.colorBox[colorBox[0]] == undefined
            ? "#FF9966"
            : this.colorBox[colorBox[0]];
      } else {
        let colorBox = el.KeyFileIds.split(",");
        el.Color =
          this.colorBox[colorBox[0]] == undefined
            ? "#FF9966"
            : this.colorBox[colorBox[0]];
      }
      return el;
    }
  },
  filters: {
    TimeChange(row) {
      // console.log(row)
      if (row == undefined) {
        return "";
      }
      var d = new Date(row);
      var times =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return times;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.line {
  text-align: center;
  float: left;
}
.mytask {
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.board-item:hover {
  background: #e5effa;
}
.board-item {
  // display: flex;
  height: 100%;
  // justify-content: space-between;
  // align-items: center;
  border-radius: 5px;
  padding: 5px 0;
  // background: #fff;
  box-sizing: border-box;
  position: relative;
}
.title {
  color: #000;
  font-size: 14px;
  margin: 10px 0;
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  // width: 630px;
}
.title-recent {
  margin-left: 18px;
  display: flex;
  height: 100%;
  align-items: center;
  width: 630px;
  float: left;
}
.title-recent .avatar {
  display: block;
  height: 32px;
  min-width: 32px;
  font-size: 20px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  opacity: 0.6;
}
.title-recent .avatar img {
  // max-height:50px;
  // max-width:50px;
  height: 100%;
  width: 100%;
}
.title-recent .right {
  margin-left: 10px;
  width: 557px;
}
.title-recent .right h2 p {
  margin: 10px 0;
  font-size: 16px;
  font-weight: 600;
   height:20px;
  line-height: 20px;
}
.topic-info {
  width: 125px;
}
.title-recent .right .topic-info {
  font-size: 15px;
  width: 700px;
}
.title-recent .right .topic-info .author {
  display: inline-block;
  color: #337ab7;
  width: 70px;
}
.title-recent .right .topic-info .time {
  margin-left: 10px;
  width: 130px;
}
.title-recent .right .keyFiles {
  font-size: 16px;
  margin-left: 10px;
  color: #343a40;
}
.left {
  display: flex;
  flex-direction: column;
  width: 200px;
  // margin-left: 80px;
  justify-content: space-between;
  height: 100%;
  float: right;
  .lefttext {
    flex: 1;
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
    width: 200px; /*需要配合宽度来使用*/
    font-size: 14px;
    margin-top: 3px;
  }
}
.detail {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  justify-content: space-between;
}
.detail .count-block {
  width: 100px;
  text-align: center;
}
.detail .count {
  margin-left: 20px;
  display: inline-block;
  text-align: center;
}
.detail .count .num {
  font-size: 20px;
  color: #aaa;
}
.detail .count .txt {
  font-size: 15px;
  color: #ccc;
  margin-top: 25px;
}
.line {
  // border-left: 4px solid #ccc;
  height: 100%;
  padding-left: 0;
  opacity: 0.6;
}
.detail .recent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 300px;
  height: 100%;
  box-sizing: border-box;
  margin-left: 50px;
}
.recent .post {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0 20px;
  padding: 8px 0;
  font-size: 15px;
}
.recent .post .content {
  font-size: 0.8em;
  color: #aaa;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; //作为弹性伸缩盒子模型显示。
  -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
  -webkit-line-clamp: 2; //显示的行
  width: 450px;
}
.time {
  color: #888;
  width: 200px; // float: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.block {
  height: 10px;
  width: 10px;
  display: inline-block;
  opacity: 0.6;
}
.delete-class {
  position: absolute;
  right: 0px;
  top: 0px;
}

.mark {
  vertical-align: baseline;
  line-height: 40px;
}
</style>

